import React from "react";
import { Modal, Button, Form, Input, Select, Row, Col } from "antd";
import type { SelectProps } from "antd";
import { changeHouse } from "@/api/house";

const { Option } = Select;

interface Props {
  open: boolean;
  onClose: () => void;
  editingKey: any;
  houseInfo: HouseType;
}

const HouseFormModal: React.FC<Props> = ({
  open,
  onClose,
  editingKey,
  houseInfo,
}) => {
  const [form] = Form.useForm();
  form.resetFields();
  const initialValues = houseInfo;

  if (editingKey) {
    form.setFieldsValue(houseInfo);
  }

  const options: SelectProps["options"] = [
    { label: "学区房", value: "学区房" },
    { label: "圈商房", value: "圈商房" },
    { label: "轻轨房", value: "轻轨房" },
    { label: "江景房", value: "江景房" },
    { label: "独栋/叠拼", value: "独栋/叠拼" },
    { label: "大房（三室以上）", value: "大房（三室以上）" },
  ];

  const handleSubmit = (values: HouseType) => {
    console.log("提交的房源信息:", values);
    // 这里可以添加提交逻辑
    changeHouse({ houseId: houseInfo.id, state: 1, ...values });
    onClose();
  };

  return (
    <Modal
      open={open}
      title={editingKey ? "编辑房源信息" : "添加房源信息"}
      onCancel={onClose}
      footer={null}
      width={900}
    >
      <Form
        form={form}
        name="house_form"
        onFinish={handleSubmit}
        initialValues={initialValues}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
      >
        <Row>
          <Col span={12}>
            <Form.Item name="houseName" label="房源名称">
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="houseType" label="房源户型">
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="houseSize" label="房源大小">
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="city" label="城市">
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="location" label="房源位置">
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="rentType" label="出租类型">
              <Select>
                <Option value="整租">整租</Option>
                <Option value="合租">合租</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="liftType" label="是否有电梯">
              <Select>
                <Option value="电梯">电梯</Option>
                <Option value="楼梯">楼梯</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="floor" label="楼层">
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="tag" label="标签">
              <Select
                mode="multiple"
                allowClear
                style={{ width: "100%" }}
                placeholder="Please select"
                defaultValue={houseInfo.tag}
                // onChange={handleChange}
                options={options}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="photo" label="图片">
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row justify="center">
          <Col>
            <Button type="primary" htmlType="submit">
              通过
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={onClose}>
              取消
            </Button>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};

export default HouseFormModal;
